<template>
  <el-container class="knowMain-container">
    <!-- 搜索区域 -->
    <el-header>
      <div class="knowMain-search">
        知识标题：
        <el-input size="small" placeholder="请输入知识标题" v-model="queryInfo.knowTitle"
          style="width: 200px; margin-right: 20px" clearable>
        </el-input>
        知识体系：
        <el-select size="small" v-model="queryInfo.knowCateId" placeholder="请选择" filterable style="margin-right: 20px"
          clearable>
          <el-option v-for="item in knowCateForm" :key="item.knowCateId" :label="`${item.cateId}_${item.knowCateName}`"
            :value="item.knowCateId">
          </el-option>
        </el-select>
        阅读次数：
        <el-input size="small" v-model="queryInfo.readCount" placeholder="选填" clearable>
        </el-input>
        点赞次数：
        <el-input size="small" v-model="queryInfo.praiseCount" placeholder="选填" clearable>
        </el-input>
        评价次数：
        <el-input size="small" v-model="queryInfo.commentCount" placeholder="选填" clearable>
        </el-input>

        <el-button size="small" type="primary" @click="getKnowMain">查询</el-button>
      </div>
    </el-header>

    <!-- 列表区域 -->
    <el-main>
      <!-- 知识发布审核通过数据 -->
      <el-table :data="knowList" :header-cell-style="rowClass" style="width: 100%">
        <el-table-column prop="knowTitle" label="知识标题" min-width="150">
        </el-table-column>
        <el-table-column prop="knowCateId" label="知识类别">
        </el-table-column>
        <el-table-column prop="staffCode" label="发布人">
        </el-table-column>
        <el-table-column prop="readCount" label="阅读次数" width="100">
        </el-table-column>
        <el-table-column prop="praiseCount" label="点赞次数" width="100">
        </el-table-column>
        <el-table-column prop="commentCount" label="评价次数" width="100">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" plain style="padding-left: 10px; padding-right: 10px;"
              @click="showDetailDialog(scope.row)">详情</el-button>
            <el-button size="mini" type="primary" plain icon="el-icon-edit">评价</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页功能 -->
      <div style="padding-top: 10px;">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="queryInfo.pageNum" :page-sizes="[5, 10, 20]" :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>

      <!-- 查看知识详情的对话框 -->
      <el-dialog title="知识详情" :visible.sync="showDetailDialogVisible" width="40%">
        <el-form :model="detailData" label-position="right" label-width="20%">
          <el-form-item label="知识标题">
            <div class="detail-item">{{ detailData.knowTitle }}</div>
          </el-form-item>
          <el-form-item label="知识内容">
            <div class="detail-item">{{ detailData.knowContent }}</div>
          </el-form-item>
          <el-form-item label="知识附件">
            <span v-for="item in fileList" :key="item.archFilesId" type="primary" style="display: block" @click="downloadFile(item.fileURL, item.fileName)">
              {{ item.fileName }} 
              <!-- <a href="http://124.223.214.155:81/files/Know/0002panda.jpg" download>download</a> -->
            </span>
          </el-form-item>
        </el-form>
      </el-dialog>

    </el-main>
  </el-container>
</template>

<script>
import { getAllApi, getKnowFileApi } from '@/api/issueApi'
import { getKnowCategoryApi } from '@/api/reportApi'
import axios from 'axios';

export default {
  data() {
    return {
      knowList: [],
      // 查询条件
      queryInfo: {
        pageNum: 1, //页码
        pageSize: 10, //每页显示多少条数据
        knowState: 3,
        knowCateId: '',
      },
      total: 0,

      // 调用接口数据
      knowCateForm: [],
      fileList: [],

      //todo 操作-详情
      showDetailDialogVisible: false,
      detailData: {},
    }
  },
  created() {
    this.getKnowList()
    this.getKnowCategory()
  },
  methods: {
    async getKnowCategory() {
      const { data: res } = await getKnowCategoryApi();
      this.knowCateForm = res.list;
    },
    //设置表头的颜色
    rowClass({ row, rowIndex }) {
      return 'background:#f5f7fd'
    },
    //todo 查询知识
    async getKnowList() {
      const { data: res } = await getAllApi(this.queryInfo);
      console.log("查询成功");
      this.knowList = res.list.records;
      this.total = res.list.total;
    },
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.getKnowList();
    },
    handleCurrentChange(newPage) {
      this.queryInfo.pageNum = newPage;
      this.getKnowList();
    },

    async getKnowMain() {
      console.log(this.queryInfo.knowCateId);
      const { data: res } = await getAllApi(this.queryInfo);
      this.knowList = res.list.records;
      this.total = res.list.total;
    },

    //todo 操作-详情
    downloadFile(fileUrl,fileName) {
      // 1、直接跳转
      // window.open(url);
      // 2、axios
      axios.get(fileUrl, { responseType: 'blob' })
        .then(response => {
          const url = window.URL.createObjectURL(new Blob([response.data]));
          const link = document.createElement('a');
          link.href = url;
          link.setAttribute('download', fileName);
          document.body.appendChild(link);
          link.click();
        })
        .catch(error => {
          console.error(error);
        });
    },

    async showDetailDialog(cateInfo) {
      // 暂时使用knowTitle，实际应该用knowId
      const { data: res1 } = await getAllApi({ knowTitle: cateInfo.knowTitle });
      this.detailData = res1.list.records[0];
      const { data: res2 } = await getKnowFileApi({ knowId: cateInfo.knowId });
      this.fileList = res2.data;
      this.showDetailDialogVisible = true;
    },



  }
}
</script>


<style lang="less" scoped>
.knowMain-container {
  padding: 15px;
}

//todo 搜索区域
.el-header {
  padding: 0 40px;
  background-color: #fff;

  .knowMain-search {
    display: flex;
    align-items: center;
    height: 60px;

    .el-input {
      margin-right: 10px;
      width: 80px;
    }
  }
}

//todo 列表区域
.el-main {
  overflow: hidden !important;
  background-color: #fff;
}

.el-button--mini {
  padding: 7px 3px;
  font-size: 10px;
}

// todo 操作-详情
.detail-item {
  padding: 0px 15px;
  border: 1px solid #eeeeee;
  border-radius: 4px;
  width: 80%;
}
</style>